<script setup lang="ts">
import { loginRules } from "./utils/rule";
import { useRouter } from "vue-router";
import { Lock, User } from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus";
defineOptions({
  name: "login",
});
//定义接口
interface RuleForm {
  username: string;
  password: string;
  Department: string;
}
const router = useRouter();
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  username: "admin",
  password: "000",
  Department: "",
});

const submitForm = async (formEl: FormInstance | undefined) => {

  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      router.push("/organization")
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<template>
  <div id="app">
    <div class="login_box">
      <div class="left"></div>
      <div class="right">
        <div class="login_title">登陆</div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="loginRules"
          label-position="top"
          label-width="auto"
          :size="formSize"
          status-icon
        >
          <el-form-item label="账号" prop="username">
            <el-input :prefix-icon="User" v-model="ruleForm.username" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input :prefix-icon="Lock" v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item label="科室">
            <el-col :span="11">
              <el-select v-model="ruleForm.Department" placeholder="">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500"></span>
            </el-col>
            <el-col :span="11">
              <el-select v-model="ruleForm.Department" placeholder="">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login_btn"
              type="primary"
              @click="submitForm(ruleFormRef)"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#app {
  background-color: #ccc;
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  position: relative;
  .login_box {
    width: 980px;
    height: 520px;
    border-radius: 30px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    display: flex;
    .left {
      width: 480px;
      background-color: #466cfa;
    }
    .right {
      width: 500px;
      padding: 40px 65px;
      .login_title{
        font-size: 24px;
        border-left: 6px solid #466cfa;
        padding-left: 15px;
        margin-bottom: 32px;
        line-height: 24px;
      }
      .el-form-item{
        margin-top: 16px;
        border-radius: 5px;
      }
      .login_btn{
        margin-top: 32px;
        width: 100%;
      }
    }
  }
}
</style>
